*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
$ys-color:red;
a{
    text-decoration: none;
}
img{
    display: block;
    width: 100%;
}
ul{
    list-style: none;
}
.hotel{
    background-color: #fa7f50;
}
.ticket{
    background-color: #3d98ff;
}
.travel{
    background-color: #44c522;
}
.toubu{
    max-width: 580px;
    min-width: 300px;
    margin: 0 auto;
    .hotel{
        span:nth-child(2){
            width: 43px;
            height: 43px;
            background: url(../images/un_ico_home_v620.png);
            background-size: 104px 327px;
            background-position: 0 -130px;
        }
    }
    .ticket{
        span:nth-child(2){
            width: 43px;
            height: 43px;
            background: url(../images/un_ico_home_v620.png);
            background-size: 104px 327px;
            background-position: 0 -284px;
        }
    }
    .travel{
        span:nth-child(2){
            width: 43px;
            height: 43px;
            background: url(../images/un_ico_home_v620.png);
            background-size: 104px 327px;
            background-position: 0 -234px;
        }
    }
    .toubu-1{
        display: flex;
        border-radius: 5px;
        margin: 3px;
        .jiudian{
            flex: 1;
            display: flex;
            height: 90px;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            color: white;
            border-right: 1px solid gray;
            }
        .select{
            flex: 2;
            display: flex;
            flex-wrap: wrap;
            a{
                width: 50%;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            a:nth-child(1){
                border-bottom: 1px solid white;
                border-right: 1px solid white;
            }
            a:nth-child(2){
                border-bottom: 1px solid white;
            }
            a:nth-child(3){
                border-right: 1px solid white;
            }
        }
    }
    .nav{
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #cccccc;
        border-radius: 5px;
        margin: 3px;
        a{
            width: 20%;
            height: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 14px;
            color: red;
            justify-content: space-around;
            .nav-icon{
                width: 24px;
                height: 24px;
                display: block;
                // background-color: skyblue;
                background: url(../images/un_ico_subnav_v7.124@2x.png)no-repeat;
                background-size: 24px 300px;
            }
        }
    }
    .special{
        border: 1px solid #cccccc;
        border-radius: 5px;
        margin: 3px;
        .special-title{
            display: flex;
            height: 35px;
            justify-content: space-between;
            align-items: center;
            span{
                font-style: italic;
                font-weight: 600;
                display: block;
                margin-left: 5px;   
                color: #fd3c52;
                font-size: 16px;
            }
            a{
                width: 110px;
                height: 18px;
                font-size: 13px;
                text-align: center;
                line-height: 19px;
                border-radius: 8px;
                margin-right: 5px;
                color: white;
                background-color: #ff7fc3;
            }
        }
        .special-articles{
            display: flex;
            margin: 3px;
            .main_sell{
                flex: 1;
                position: relative;
                img{
                    height: 163px;
                }
                p{
                    font-size: 14px;
                    color: black;
                }
                dl{
                    color: red;
                }
                span{
                    position: absolute;
                    top: 10px;
                    right: 20px;
                    color: white;
                    background-color: #fd3a51;
                }
            }
            .sale{
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                a:nth-child(1){
                    width: 100%;
                    height: 50%;
                    position: relative;
                    padding: 5px;
                    background-color: #f9f9f9;
                    dl:nth-child(1){
                        color: #fd3a51;
                        font-size: 16px;
                    }
                    dl:nth-child(2){
                        color: black;
                        font-size: 12px;
                    }
                    img{
                        width: 54px;
                        height: 71px;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                    }
                }
                a:nth-child(2){
                    width: 50%;
                    height: 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    background-color: #f9f9f9;
                    padding: 10px;
                    // border-right: 5px solid white;
                    img{
                        width: 54px;
                        height: 51px;
                    }
                }
                a:nth-child(3){
                    width: 50%;
                    height: 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    background-color: #f9f9f9;
                    padding: 10px;
                    img{
                        width: 54px;
                        height: 51px;
                    }
                }
            }
        }
    }
    .activity{
        border: 1px solid #cccccc;
        border-radius: 5px;
        margin: 3px;
        .activity-title{
            display: flex;
            justify-content: space-between;
            margin: 5px;
            span{
                color: #ffac13;
            }
            a{
                width: 110px;
                height: 18px;
                font-size: 13px;
                text-align: center;
                line-height: 19px;
                border-radius: 8px;
                margin-right: 5px;
                color: white;
                background-color: #ff7fc3;
            }
        }
        .welfare{
            display: flex;
            flex-wrap: wrap;
            a:nth-child(-n+2){
                width: 50%;
            }
            a{
                width: 50%;
            }
        }
    }
    footer{
        .connection{
            display: flex;
            a{
                flex: 1;
                display: flex;
                justify-content: space-around;
                flex-direction: column;
                align-items: center;
                color: black;
            }
        }
        .options{
            text-align: center;
            span:nth-child(2){
                width: 70px;
                display: inline-block;
                border-left: 1px solid black;
                border-right: 1px solid black;
            }
        }
        p{
            text-align: center;
        }
    }
}
// .shiyan{
//     ul{
//         display: flex;
//         flex-wrap: wrap;
//         li{
//             width: 10%;
//             height: 20px;
//             margin: 3px;
//             background-color: skyblue;
//         }
//     }
// }